<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>修改员工</title>
	<link rel="stylesheet" href="../layui/css/layui.css" type="text/css" />
	<style type="text/css">label span {color: red;}</style>
</head>
<body>
	<form class="layui-form" style="margin-top: 15px" lay-filter="employee">
		<input type="hidden" name="empId" />
		<div class="layui-form-item">
			<label for="empName" class="layui-form-label">
				<span>*</span>员工名：
			</label>
			<input type="text" class="layui-input layui-input-inline" name="empName" id="empName" placeholder="请输入员工名" autocomplete="off" lay-verify="required|empName" />
		</div>
		<div class="layui-form-item">
			<label for="email" class="layui-form-label">邮箱：</label>
			<input type="text" class="layui-input layui-input-inline" name="email" id="email" placeholder="请输入员工邮箱" autocomplete="off" lay-verify="email" />
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">
				<span>*</span>性别：
			</label>
			<input type="radio" name="sex" title="男" value="M" lay-filter="checkSex" />
			<input type="radio" name="sex" title="女" value="F" lay-filter="checkSex" />
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">
				<span>*</span>部门：
			</label>
			<div class="layui-inline">
				<select name="dId" id="dId" class="layui-select" lay-verify="required">
					<option value="">请选择部门</option>
				</select>
			</div>
		</div>
		<div class="layui-form-item" style="text-align: center">
			<button class="layui-btn layui-btn-lg" type="button" lay-submit lay-filter="addEmp" id="submit">
				<i class="layui-icon layui-icon-ok"></i>提交
			</button>
			<button class="layui-btn layui-btn-lg layui-btn-danger" type="button" id="close">
				<i class="layui-icon layui-icon-close"></i>关闭
			</button>
		</div>
	</form>
</body>
<script src="../jquery/jquery.min.js"></script>
<script src="../layui/layui.js"></script>
<script src="../common.js"></script>
<script>
	var index = parent.layer.getFrameIndex(window.name);
	var empId = getUrlParam("empId");
	layui.use("form", function () {
		var form = layui.form;
		form.render();
		
		$.ajax({
			url: baseUrl + "depts",
			success: function (res) {
				$.each(res.data.list, function (index, item) {
					$("#dId").append("<option value='"+item.deptId+"'>"+item.deptName+"</option>");
				});
				form.render();
				$.ajax({
					url: baseUrl + "emp/" + empId,
					success: function (res) {
						var data = res.data;
						form.val("employee", {
							"empId": data.empId,
							"empName": data.empName,
							"email": data.email,
							"sex": data.sex,
							"dId": data.dId
						});
						form.render();
					}
				});
			}
		});
		
		form.verify({
			empName: function (value) {
				if(!new RegExp("^[a-zA-Z0-9_\u4e00-\u9fa5\\s·]+$").test(value)){
					return '员工名不能有特殊字符';
				}
				if(/(^\_)|(\__)|(\_+$)/.test(value)){
					return '员工名首尾不能出现下划线\'_\'';
				}
				if(/^\d+\d+\d$/.test(value)){
					return '员工名不能全为数字';
				}
				if (value.length > 5) {
					return "员工名最长不能超过5个字符";
				}
			}, email: function (value) {
				if (value.length > 0) {
					var myreg = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;
					if(!myreg.test(value)) {
						return '请输入有效的邮箱！';
					}
				}
			}
		});
		
		form.on("radio(checkSex)", function () {
			$("#submit").removeClass("layui-btn-disabled");
		});
		
		$("#empName").on("input", function () {
			$("#submit").removeClass("layui-btn-disabled");
		});
		
		form.on("submit(addEmp)", function (obj) {
			var data = obj.field;
			$("#submit").addClass("layui-btn-disabled");
			if (data.sex === undefined) {
				layer.msg("请选择员工性别");
				return false;
			}
			$.ajax({
				url: baseUrl + "checkEmp/" + data.empName + "/" + data.empId,
				success: function (res) {
					if (res.code !== 200) {
						layer.msg(res.msg);
						return false;
					}
					$.ajax({
						url: baseUrl + "emp",
						type: "put",
						data: JSON.stringify(data),
						contentType: "application/json",
						success: function (res) {
							if (res.code === 200) {
								layer.msg(res.msg, {icon: 1, time: 1000});
								setTimeout(function () {
									parent.layer.close(index);
									parent.initTable();
								}, 1000);
								return false;
							}
							layer.msg(res.msg);
						}
					});
				}
			});
		});
	});
	
	$("#close").on("click", function () {parent.layer.close(index);});
</script>
</html>